<template>
	<div class="system-user-container">
		<el-card shadow="hover" class="filtering">
			<div class="filtering-list-flex">
				<div class="filtering-list-title">规则名称</div>
				<div class="filtering-list-item"><el-input v-model="filtering.input1" style="max-width: 180px" placeholder="请输入规则名称"></el-input></div>
			</div>
			<div class="filtering-list-flex">
				<div class="filtering-list-title">添加日期</div>
				<div class="filtering-list-item"><el-date-picker v-model="filtering.pickData" placeholder="请输入添加日期" type="date" /></div>
			</div>
			<div class="form-search-footer mt20">
				<el-button :loading="tableData.loading" type="primary" @click="formFind">查询</el-button>
				<el-button @click="formReset">重置</el-button>
			</div>
		</el-card>
		<el-card shadow="hover" class="mt5">
			<div class="system-user-search mb10">
				<div>
					<el-button type="success" icon="el-icon-plus" @click="addList">添加商品</el-button>
					<el-button :disabled="multipleSelection.length === 0" type="danger" icon="el-icon-delete" @click="delList">批量删除</el-button>
				</div>
			</div>
			<mTableLength :number="multipleSelection.length" @cancel="cancel"></mTableLength>
			<el-table
				ref="multipleTable"
				:data="tableData.data"
				v-loading="tableData.loading"
				stripe
				style="width: 100%"
				:header-cell-style="{ color: '#7f8da6', backgroundColor: '#F5F6F8' }"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" fixed="left" />
				<el-table-column prop="id" label="规则编号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="规则名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="minimumNum" label="最低成团人数" show-overflow-tooltip min-width="100"></el-table-column>
				<el-table-column prop="winningProportion" label="拼中比例" show-overflow-tooltip width="70">
					<template #default="scope">
						<span>{{ scope.row.winningProportion }}%</span>
					</template>
				</el-table-column>
				<el-table-column prop="subsidiesProportion" label="补贴比例" show-overflow-tooltip width="70">
					<template #default="scope">
						<span>{{ scope.row.subsidiesProportion }}%</span>
					</template>
				</el-table-column>
				<el-table-column prop="isUnified" label="是否在统一概率池" show-overflow-tooltip width="120">
					<template #default="scope">
						<span>{{ filterIsUnified(scope.row.isUnified) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="givingProportion" label="赠送比例" show-overflow-tooltip width="70">
					<template #default="scope">
						<span>{{ scope.row.givingProportion }}%</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="添加日期" width="150" show-overflow-tooltip></el-table-column>
				<el-table-column prop="path" label="操作" width="120" fixed="right">
					<template #default="scope">
						<el-button size="mini" @click="editList(scope.row)" icon="el-icon-edit" type="primary"></el-button>
						<el-button size="mini" @click="onRowDel(scope.row)" icon="el-icon-delete" type="danger"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="getList"
			/>
		</el-card>

		<operationGroupRule ref="operationGroupRuleRef" :contentInfo="selectRow" :option="option" @isOk="initTableData" />
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted } from 'vue'
import Pagination from '/@/components/Pagination/index.vue'
import Radio from '/@/components/Radio/index.vue'
import mTableLength from '/@/components/mTableLength/index.vue'
import { yesOrNo } from '/@/dictionaries/overall'
import operationGroupRule from './component/operationGroupRule.vue'
import { statusFilter } from '/@/utils/toolsValidate'
import { formatDate } from '/@/utils/formatTime'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { defaultGroupRuleData, getGoodsSellingRulesList } from '/@/api/group'

export default {
	name: 'groupRule',
	components: { Pagination, Radio, mTableLength, operationGroupRule },
	setup() {
		const refs: any = reactive({
			multipleTable: null,
			operationGroupRuleRef: null
		})

		const state: any = reactive({
			filtering: {
				input1: '',
				pickData: ''
			},
			tableData: {
				data: [],
				loading: false,
				total: 0,
				param: {
					pageNum: 1,
					pageSize: 10
				}
			},
			selectRow: {},
			multipleSelection: [],
			option: {
				type: 'add',
				title: '新增'
			}
		})
		// 初始化表格数据
		const initTableData = () => {
			state.tableData.loading = true

			const params = {
				searchText: state.filtering.input1,
				createTime: state.filtering.pickData ? formatDate(new Date(state.filtering.pickData), 'YYYY-mm-dd') : '',
				pageNum: state.tableData.param.pageNum,
				pageSize: state.tableData.param.pageSize
			}

			getGoodsSellingRulesList(params)
				.then(res => {
					const { datas } = res

					state.tableData.data = datas.list
					state.tableData.total = datas.total
				})
				.finally(() => {
					state.tableData.loading = false
				})
		}
		const filterIsUnified = (val: Number) => {
			return statusFilter(val, yesOrNo)
		}
		// 添加
		const addList = () => {
			state.selectRow = { ...defaultGroupRuleData }
			state.option.type = 'add'
			state.option.title = '新增拼团规则'
			refs.operationGroupRuleRef.openDialog()
		}
		// 编辑
		const editList = (row: object) => {
			state.selectRow = { ...row }
			state.option.type = 'edit'
			state.option.title = '编辑拼团规则'
			refs.operationGroupRuleRef.openDialog()
		}
		// 多行删除
		const delList = () => {
			ElMessageBox.confirm('此操作将删除选中所有商品信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				ElMessage.success('删除成功！')
				initTableData()
			})
			console.log(state.multipleSelection)
		}
		// 当前行删除
		const onRowDel = (row: object) => {
			ElMessageBox.confirm('此操作将删除该商品信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				ElMessage.success('删除成功！')
				initTableData()
			})
			console.log(row)
		}
		const getList = val => {
			state.tableData.param.pageNum = val.page
			state.tableData.param.pageSize = val.limit
			initTableData()
		}
		const formFind = () => {
			console.log(state.filtering)
			initTableData()
		}
		const formReset = () => {
			state.filtering.input1 = ''
			state.filtering.pickData = ''
			initTableData()
		}
		const handleSelectionChange = val => {
			state.multipleSelection = val
		}
		const cancel = () => {
			refs.multipleTable.clearSelection()
		}
		// 页面加载时
		onMounted(() => {
			initTableData()
		})
		return {
			initTableData,
			filterIsUnified,
			addList,
			editList,
			delList,
			onRowDel,
			getList,
			formFind,
			formReset,
			handleSelectionChange,
			cancel,
			...toRefs(refs),
			...toRefs(state)
		}
	}
}
</script>

<style scoped lang="scss">
.system-user-container {
	.system-user-search {
		display: flex;
		justify-content: space-between;
	}
	.system-user-photo {
		width: 40px;
		height: 40px;
	}
}
</style>
